<template>
  <div class="main">

    <div class="flx1">
      <el-select v-model="model"
                 style="width:200px"
                 placeholder="请选择所选值">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="model1"
                 style="width:200px"
                 placeholder="班级">
        <el-option v-for="item in options1"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
      <el-switch v-model="obj1"
                 active-color="#13ce66"
                 inline-prompt="小组任务"
                 inactive-color="#ff4949" inactive-text="小组任务" active-text="小组任务"></el-switch>
      <el-switch v-model="obj2"
                 active-color="#13ce66"
                 inline-prompt="小组任务"
                 inactive-color="#ff4949" inactive-text="我反馈" active-text="我反馈"></el-switch>
      <el-switch v-model="obj3"
                 active-color="#13ce66"
                 inline-prompt="小组任务"
                 inactive-color="#ff4949" inactive-text="全部反馈" active-text="全部反馈"></el-switch>
      <el-switch v-model="obj4"
                 active-color="#13ce66"
                 inline-prompt="小组任务"
                 inactive-color="#ff4949" inactive-text="邮件通知" active-text="邮件通知"></el-switch>

      <el-input v-model="s1"
                style="width:200px"
                placeholder="搜索">
        <template #prefix>
          <el-icon>
            <Search />
          </el-icon>

        </template>
      </el-input>
    </div>

    <div class="flex2">
      <div> 任务：{{model?"选择的是"+model:""}}</div>
      <div> 权重占比：7.5%</div>
      <div>
        完成截止时间：2024/04/07 23:59:59</div>

      <div> 掌握vue-router的使用方法，定义多个页面组件。</div>
    </div>
    <el-table :row-class-name="tableRowClassName"
              style="margin: 10px 0;width:100%"
              :data="data">
      <el-table-column align="center"
                       label="学号"
                       width="200"
                       type="index" />
      <!-- 
                prop所展示的是一个div
                不用div可以用插槽来解决
             -->
      <el-table-column align="center"
                       label="学术姓名"
                       width="200"
                       prop="name" />
      <el-table-column align="center"
                       label="班级"
                       width="200"
                       prop="class">

      </el-table-column>
      <el-table-column align="center"
                       width="200"
                       prop="score"
                       label="得分"> </el-table-column>

      <el-table-column align="center"
                       width="200"
                       prop="desc"
                       label="评语"> </el-table-column>
      <el-table-column align="center"
                       width="200"
                       prop="desc"
                       label="操作">
        <template #="{ row, $index }">
          <el-button type="text"
                     size="small"
                     icon="Edit"
                     @click="editTrademark(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const s1 = ref();
const model = ref("Vue3开发初体验");
const model1 = ref();
const options = ref([
  {
    label: "Vue3开发初体验",
    value: "Vue3开发初体验",
  },
  {
    label: "Vue3路由的使用",
    value: "Vue3路由的使用",
  },
  {
    label: "电影列表项目",
    value: "电影列表项目",
  },
  {
    label: "Vue自动化测试",
    value: "Vue自动化测试",
  },
  {
    label: "状态管理Pinia",
    value: "状态管理Pinia",
  },
  {
    label: "使用UI组件库",
    value: "使用UI组件库",
  },
]);
const options1 = ref([
  {
    label: "22软件3班",
    value: "22软件3班",
  },
  {
    label: "22软件2班",
    value: "22软件2班",
  },
  {
    label: "22软件1班",
    value: "22软件班",
  },
  {
    label: "21软件1班",
    value: "21软件1班",
  },
  {
    label: "21软件3班",
    value: "21软件3班",
  },
]);
const obj = ref({});

const obj1 = ref({});
const obj2 = ref({});
const obj3 = ref({});
const obj4 = ref({});

const head = ref([{ prop: "name" }]);
const data = ref([
  {
    id: 2,
    name: "卢俊杰",
    class: "22软件3班",
    score: "59",
    desc: "不及格",
  },
  {
    id: 2,
    name: "黄文捷",
    class: "22软件3班",
    score: "45",
    desc: "不合格",
  },
  {
    id: 2,
    name: "冯家乐",
    class: "22软件3班",
    score: "50",
    desc: "不合格",
  },
  {
    id: 2,
    name: "陈好贤",
    class: "22软件1班",
    score: "79",
    desc: "良好",
  },
  {
    id: 2,
    name: "迪迦",
    class: "22软件1班",
    score: "65",
    desc: "良好",
  },
  {
    id: 2,
    name: "派大星",
    class: "22软件1班",
    score: "80",
    desc: "良好",
  },
  {
    id: 2,
    name: "海绵宝宝",
    class: "22软件1班",
    score: "85",
    desc: "良好",
  },
  {
    id: 2,
    name: "章鱼哥",
    class: "22软件1班",
    score: "85",
    desc: "良好",
  },
  {
    id: 2,
    name: "灰太狼",
    class: "22软件1班",
    score: "90",
    desc: "良好",
  },
  {
    id: 2,
    name: "喜羊羊",
    class: "22软件1班",
    score: "95",
    desc: "良好",
  },
  {
    id: 2,
    name: "美羊羊",
    class: "22软件1班",
    score: "79",
    desc: "良好",
  },
  {
    id: 2,
    name: "懒羊羊",
    class: "22软件1班",
    score: "75",
    desc: "良好",
  },
  {
    id: 2,
    name: "黑大帅",
    class: "22软件2班",
    score: "60",
    desc: "良好",
  },
  {
    id: 2,
    name: "吉吉国王",
    class: "22软件3班",
    score: "100",
    desc: "良好",
  },
  {
    id: 2,
    name: "光头强",
    class: "22软件1班",
    score: "90",
    desc: "良好",
  },

]);

const tableRowClassName = (row, rowIndex) => {
  console.log(row);

  if (row.row.score < 60) {
    return "rowColor";
  } else {
    return "rowGColor";
  }
  return "";
};
</script>

<style scoped>
.flex2{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.flx1 {
  display: flex;
  justify-content: space-between;
}
::v-deep .el-table .rowColor {
  background: rgb(245, 99, 99);
}
::v-deep .el-table .rowGColor {
  background: rgb(121, 247, 121);
}
.main
{
  position: absolute;
  width: 90%;
  align-items: center;
  top:100px;
  left: 50px;
}
</style>